<template>
  <div>
    <bread-crumb one="平台管理" two="日志管理"></bread-crumb>

    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="应用服务" name="应用服务"></el-tab-pane>
      <el-tab-pane label="系统日志" name="系统日志"></el-tab-pane>
    </el-tabs>

    <el-form :inline="true" :model="formData">
      <el-form-item label="服务器Ip：">
        <el-input v-model="formData.serverIp"></el-input>
      </el-form-item>
      <el-form-item label="组件名：">
        <el-input v-model="formData.bundle"></el-input>
      </el-form-item>
      <el-form-item label="服务名：">
        <el-input v-model="formData.service"></el-input>
      </el-form-item>
      <!--<el-form-item label="日志级别：">-->
      <!--<el-select v-model="formData.logType" placeholder="请选择">-->
      <!--<el-option label="错误" value="1"></el-option>-->
      <!--<el-option label="警告" value="2"></el-option>-->
      <!--<el-option label="信息" value="3"></el-option>-->
      <!--</el-select>-->
      <!--</el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="search" @click="handleSearch()">搜索</el-button>
        <el-button type="primary" icon="delete" @click="handleClear()">清空</el-button>
      </el-form-item>
    </el-form>

    <el-form>
      <el-form-item label="日志类型：">
        <el-button type="primary" @click="handleLogType(1)">错误</el-button>
        <el-button type="primary" @click="handleLogType(2)">警告</el-button>
        <el-button type="primary" @click="handleLogType(3)">信息</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading.body="loading" :data="tableData" border>
      <el-table-column prop="log_type" label="日志级别" align="center" width="100">
        <template slot-scope="scope">
          <span>{{logType(scope.row.log_type)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="occur_time" label="发生时间" align="center">
        <template slot-scope="scope">
          <span>{{formatDate(scope.row.occur_time)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="server_ip" label="服务器Ip" align="center"></el-table-column>
      <el-table-column prop="bundle" label="组件名" align="center"></el-table-column>
      <el-table-column prop="version" label="组件版本" align="center" width="100"></el-table-column>
      <el-table-column prop="service" label="服务名" align="center"></el-table-column>
      <el-table-column prop="message" label="消息" align="center"></el-table-column>
      <el-table-column label="操作" align="center" width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="handleCheck(scope.$index, scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <Pagination />

    <el-dialog title="日志详情" :visible.sync="dialogTableVisible">
      <el-table :data="detailInfo" border>
        <el-table-column width="100" prop="key" label="名称" align="center"></el-table-column>
        <el-table-column prop="value" label="值" align="center"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
  import BreadCrumb from "@/components/BreadCrumb.vue";
  import {mixins} from "@/core";
  import utils from "@/utils";

  export default {
    components: {
      BreadCrumb,
    },
    mixins: [mixins],
    data () {
      return {
        detailInfo: [],
        dialogTableVisible: false,
        formData: {
          serverIp: "",
          bundle: "",
          service: "",
          logType: ""
        },
        activeName: "应用服务",
        API: {
          query: "/gafe/biz_logs"
//          query: "http://localhost:8090/static/biz_logs.json"
        }
      }
    },
    methods: {
      handleTabClick(tab, event) {
        if (tab.index === "0") {
          this.API.query = "/gafe/biz_logs";
        } else {
          this.API.query = "/gafe/sys_logs";
        }

        Object.keys(this.formData).forEach((key) => {
          this.formData[key] = "";
        });

        this.getTableData();
      },
      logType (type) {
        return type == 1 ? "错误" : type == 2 ? "警告" : "信息";
      },
      formatDate (timestamp) {
        return utils.formatDate(timestamp, "yyyy/MM/dd hh:mm:ss");
      },
      handleLogType (val) {
        this.formData.logType = val;
        this.getTableData();
      },
      handleCheck (index, row) {
        this.detailInfo = [];

        const arr = ["日志级别", "发生时间", "服务器Ip", "组件名", "组件版本", "服务名", "消息"];

        ["log_type", "occur_time", "server_ip", "bundle", "version", "service", "message"].forEach((item, i) => {
          this.detailInfo.push({
            key: arr[i],
            value: item === "log_type" ? this.logType(row[item]) : item === "occur_time" ? this.formatDate(row[item]) : row[item]
          })
        });
        this.dialogTableVisible = true;
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-input, .el-select {
    width: 120px;
  }

  .el-dialog .el-table {
    height: 321px;
    overflow-y: auto;

    &::before {
      display: none;
    }
  }

  .el-dialog .el-table /deep/ .cell, .el-dialog .el-table /deep/ th > div {
    white-space: normal;
  }
</style>
